<template>
	<view>
		<view style="background-image: url(../../static/21.jpg);background-size: 100%;background-position: top;">
			<view style="width: 100%;display: flex;height: 100upx;line-height: 100upx;margin-top: 90upx;">
				<view style="position: relative;margin-left: 20upx;">
					<image style="width: 40upx;height: 40upx;position: absolute;top: 32upx;left: 0;" src="../../static/65.png" mode=""></image>
					<text style="margin-left: 50upx;">规则</text>
				</view>
				<view style="font-size: 38upx;font-weight: bold;margin-left: 225upx;">
					拼团
				</view>
				<view @click="navTo('/pages/ctjl/ctjl')" style="background-image: url(../../static/89.png);background-size:170upx 50upx;background-repeat: no-repeat;background-position: center;width: 170upx;text-align: center;position: absolute;right: 0;">
					我的拼团
				</view>
			</view>
			
			<!-- <view style="width: 100%;height: 100upx;margin: 50upx 0;display: flex;">
				
				<view @click="jumpno" :disabled="disable" style="width: 40%;background: url(../../static/46.png) no-repeat center;border-radius: 80upx;color: #000;border: 1px solid #fff;font-weight: 555;text-align: center;height: 90upx;margin: 0 auto;line-height: 90upx;font-size: 32upx;">我要拼团</view>
			</view> -->
			<view style="width: 90%;height: 300upx;margin-left: 5%;overflow: hidden;padding-bottom: 50upx;">
				<image src="../../static/432.png" style="width: 100%;height: 300upx;border-radius: 20upx;" mode=""></image>
			</view>
		</view>
		<view>
			<view style="display: flex;justify-content: space-around;height: 100upx;line-height: 100upx;background-color: #fff;color: #000000;">
				<view v-for="(item,index) in menus" :key='index' :class="{active: currentIndex === index}" @click="menusClick(index)">
					{{item}}
				</view>
			</view>
			<view v-if="status==1" v-for="(item,index) in list" :key='index' style="width: 95%;margin-left: 2.5%;border-radius: 20upx;height: 300upx;background-color: #fff;margin-top: 30upx;margin-bottom: 30upx; overflow: hidden;display: flex;">
				<view style="width: 270upx;height: 270upx;padding: 15upx;">
					<image :src="item.thumb" style="width: 100%;height: 100%;border-radius: 20upx;" mode=""></image>
				</view>
				<view style="display: flex;flex-flow: column;color: #000000;justify-content: space-between;width: 413upx;">
					<view style="padding: 30upx;">
						{{item.title}}
					</view>
					<view style="display: flex;justify-content: space-between;padding: 30upx;">
						<view style="color: #FF5E00;margin-top: 15upx;">
							<view style="font-size: 20upx;font-weight: 550;">
								库存: {{item.total}}
							</view>
							<view style="font-size: 38upx;font-weight: 550;">
								¥{{item.marketprice}}
							</view>
						</view>
						<view @click="navTo('/pages/goods/detail?goodsid='+item.id)" style="background-color: #EC2E16;color: #fff;border-radius: 50upx;height: 50upx;line-height: 50upx;padding: 5upx 20upx;margin-top: 30upx;">
							参与拼购
						</view>
					</view>
				</view>
			</view>
			<view v-if="status==0" style="color: #000000;">
				<image src="../../static/searchlist.png" mode="" style="display: block;margin: 100upx auto;width: 240upx;height: 240upx;"></image>
				<view style="text-align: center;color: #999;">暂时没有任何商品</view>
			</view>
		</view>
		<uni-popup ref="popup" @towangzhan='towangzhan' @disagree='disagree' @xieyi='xieyi' type="bottom"></uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	// import numberJpan from "@/components/numberJpan/numberJpan.vue";
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	export default {
		data() {
			return {
				paypass:'',
				openid:'',
				hr: 0,
				min: 0,
				sec: 0,
				h: 0,
				m: 0,
				s: 0,
				scrollLeft:100,
				disable: false,
				menus:['400元区','1000元区'],
				currentIndex:0,
				gift:1,
				list:[],
				status:'',
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniCountdown,
			// numberJpan
		},
		onLoad: function () {
			uni.getStorage({
			 key: 'openid',
			 success: (res) => {
			  this.openid = res.data
			  this.setAjax();
			 },
			 fail: () => {
				uni.navigateTo({
					url: '../login/login'
				});
			 }
			});
		},
		onShow() {
			if(this.rule==0){
				this.openxieyi()
			}
		},
		methods: {
			setAjax(){
				var data = {
						'openid': this.openid,
						'gift': this.gift,
					}
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list_pt&app=1',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						this.list = res.data.result.list
						this.status = res.data.status
					},
					fail: () => {},
					complete: () => {}
				});
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.show_rule&app=1',
					method: 'POST',
					data: {
						'openid': this.openid,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						this.rule = res.data.rule
					},
					fail: () => {},
					complete: () => {}
				});
			},
			openxieyi(){
				setTimeout(() => {
					this.$refs.popup.open()
				}, 0)
			},
			xieyi(){
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.change_rule&app=1',
					method: 'POST',
					data: {
						'openid': this.openid,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						this.rule = res.data.rule
					},
					fail: () => {},
					complete: () => {}
				});
			},
			disagree(){
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			navTo(url){
				uni.navigateTo({  
					url
				})  
			},
			menusClick(index){
				this.currentIndex = index
				this.gift = this.currentIndex + 1
				this.setAjax()
			},
			closeChange(res){
				console.log({res})
				this.paypass = res
				this.sd_cantuan()
			},
			sd_cantuan(){
				var o = this
				var delay = (Math.random()*2).toFixed(3)
				var data = {
						'openid': this.openid,
						'paypass': this.paypass,
						'delay': delay
					}
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw&app=1',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
							if(res.data.error==2){
								uni.showToast({
									title: res.data.message,
									icon:"none"
								});
								setTimeout(function() {
									uni.switchTab({
										url:'/pages/cart/cart'
									})
								}, 2000);
								
								return
							}
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon:"none"
							});
							o.disable = true
							setTimeout(function() {
								o.disable = false
							}, 3000);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jumpno () {
				var k = this
				uni.showModal({
				    title: '提示',
				    content: '确认自动参团',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
										var data1 = {
												'openid': k.openid,
											}
										uni.request({
											url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.autopt&app=1',
											method: 'POST',
											data: data1,
											header:{'Content-Type':'application/x-www-form-urlencoded'},
											success: res => {
												console.log(res)
												if(res.data.error==2){
													uni.showToast({
														title: res.data.message,
														icon:"none"
													});
													setTimeout(function() {
														uni.switchTab({
															url:'/pages/cart/cart'
														})
													}, 2000);
													
													return
												}
													uni.showToast({
														title: res.data.message,
														duration: 2500,
														icon:"none"
													});
													k.disable = true
													setTimeout(function() {
														k.disable = false
													}, 3000);
											},
											fail: () => {},
											complete: () => {}
										});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.bgchg {
		background-color: #fff;color: #FF5555;
	}
	.active {border-bottom: 5upx solid #EB2E15;color: #EB2E15;}
	.none {}
	page {color: #fff;}
 .detail-desc{
 	.d-header{
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		height: 80upx;
 		position: relative;
 		text{
 			padding: 0 50upx;
 			position: relative;
 			z-index: 1;
 		}
		&:before{
			position: absolute;
			left: 54%;
			top: 50%;
			transform: translateX(75upx);
			width: 20upx;
			height: 0;
			content: '';
			border-bottom: 1px solid #fff;
		}
 		&:after{
 			position: absolute;
 			left: 46%;
 			top: 50%;
 			transform: translateX(-100upx);
 			width: 20upx;
 			height: 0;
 			content: '';
 			border-bottom: 1px solid #fff;
 		}
 	}
 }
</style>
